//引入vue模块
import Vue from 'vue'

//引入vue的入口组件
import App from './自定义指令-指令的值.vue'

Vue.config.productionTip = false

//注册全局组件
// Vue.component(名字, 组件)

//注册复制指令
Vue.directive('copy', {
  /**
   * bind 钩子函数，第一次绑定时调用，可以在这里做初始化设置
   * el: 作用的 dom 对象
   * value: 传给指令的值，要 copy 的值
   */
  bind(el, { value }) {
    //  如果要直接使用复制操作请解开下面代码
     el.$value = value
    el.handel = () => {
      if (!el.$value) {
        //在此处可以提示用户没有复制内容
        //alert(0)
        return
      }
      const textarea = document.createElement('textarea')
      textarea.readOnly = 'readonly'
      textarea.style.position = 'absolute'
      textarea.style.left = '-99999x'
      textarea.value = el.$value
      document.body.appendChild(textarea)
      textarea.select()
      textarea.setSelectionRange(0, textarea.value.length)
      const result = document.execCommand('Copy')
      if (result) {
        //在此处可以提示用户复制成功
       // alert(1)
      }
      document.body.removeChild(textarea)
    }
    el.addEventListener('click', el.handel)
  },
  componentUpdated(el, { value }) {
    //内容修改后才会将复制内容给到粘贴板
    el.$value = value
  },
  // 指令与元素解绑的时候，移除事件绑定
  unbind(el) {
    el.removeEventListener('click', el.handel)
  },
})

//实例化vue对象
new Vue({
  //渲染vue组件
  render: (h) => h(App),
})
  //找到public中的index.html中的#app盒子
  .$mount('#app')
